<template>
	<view class="main">
		<view class="flex align between top-view" @click="toUrl()">
			<view class="kaquan flex align">我的卡券</view>
		</view>
		<view class="zhiling" v-if="!showM">
			<view class="zhiTit">兑换码</view>
			<u--input placeholder="请输入兑换码" border="surround" v-model="redeem_code"></u--input>
			<!-- <van-field :focus="{{focus}}" size="large" model:value="{{ redeem_code }}" placeholder="请输入兑换码" /> -->
			<view class="zhiBtn" @click="toCheckCode()">确定</view>
		</view>
		<view v-if="showM">
			<view class="flex align" style="margin: 20rpx 20rpx 0;color: #007830;font-size: 28rpx;">兑换码：{{redeem_code}}
			 <view @click="toRe()" style="margin-left: 20rpx;background: #007830;color: white;font-size: 26rpx;padding: 2rpx 10rpx;">重新输入</view>
			</view>
			<view class="flex between wrap" style="margin:30rpx 24rpx;">
				<navigator :url="'/pages/integral/detail?id='+item.id" class="list" hover-class="none"
					v-for="(item,index) in list" :key="index">
					<image mode="aspectFill" class="img" :src="item.cover"></image>
					<view class="list-info">
						<view class="name">{{item.name}}</view>
					</view>
				</navigator>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		tourProductLists,
		wechatLogin,
		userDetail,
		config,
		checkCode
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				redeem_code: '',
				showM: false,
				list: [],
				info:''
			};
		},
		onLoad() {
		},
		onShow() {
			this.getInfo()
		},
		mounted() {
			// this.getList()
		},
		methods: {
			toRe(){
				this.showM = false
			},
			async getList() {
				const result = await tourProductLists()
				if (result.code == 1) {
					this.list = result.data
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			async toCheckCode() {
				if (this.redeem_code == '') {
					uni.showToast({
						title: '请输入兑换码',
						icon: 'error'
					})
					return false
				}
				const result = await checkCode({
					redeem_code: this.redeem_code
				})
				if (result.code == 1) {
					if (result.data.status == 0) {
						uni.showToast({
							title: '无效兑换码',
							icon: 'error'
						})
					}
					if (result.data.status == 2) {
						uni.showToast({
							title: '该兑换码已使用',
							icon: 'error'
						})
					}
					if(result.data.status == 1){
						this.showM = true
						this.getList()
						uni.setStorageSync('code',this.redeem_code)
					}
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			async toCheckCode2(code) {
				console.log(code)
				const result = await checkCode({
					redeem_code: code
				})
				if (result.code == 1) {
					if(result.data.status == 1){
						this.showM = true
						this.getList()
						this.redeem_code = code
						uni.setStorageSync('code',code)
					}
				} else {
					// uni.showToast({
					// 	title: result.msg,
					// 	icon: 'error'
					// })
				}
			},
			toUrl() {
				uni.navigateTo({
					url: '/pages/integral/coupon'
				})
			},
			async getInfo() {
				const result = await userDetail()
				if (result.code == 10000 || result.code == 20003) {
					this.getConfig()
					// this.wxLogin()
				} else if (result.code == 1) {
					this.info = result.data
					let code = uni.getStorageSync('code')
					if(code){
						this.toCheckCode2(code)
					}
					
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			async getConfig() {
				const result = await config()
				if (result.code == 1) {
					this.appid = result.data.appId
					this.checkWeChatCode()
				} else {

				}
			},
			wxLogin() {
				let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
				let appid = this.appid
				//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
				let href = "https://ncymkj.doudou00.com/get-weixin-code.html?appid=" + appid +
					"&response_type=code&scope=snsapi_userinfo&state=123456&redirect_uri=" + local + "#wechat_redirect"
				console.log(href)
				window.location.href = href
			},
			//检查浏览器地址栏中微信接口返回的code
			checkWeChatCode() {
				let code = this.getUrlCode('code')
				console.log(code)
				if (code) {
					// uni.showToast({
					// 	title: `微信code=${code}`
					// })
					this.getOpenidAndUserinfo(code)
				} else {
					this.wxLogin()
					// this.getInfo()
				}
			},
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
				[, ''
				])[1].replace(/\+/g, '%20')) || null
			},
			async getOpenidAndUserinfo(code) {
				this.show = true
				const result = await wechatLogin({
					code: code
				})
				if (result.code == 1) {
					uni.setStorageSync('token', result.data.token);
					this.getInfo()
					this.sendData({
						type: 'user_auth',
						token: result.data.token,
					});
				} else {
					// uni.showToast({
					// 	title: result.msg,
					// 	icon: 'error'
					// });
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F3F3F3;
		padding-bottom: 80rpx;
	}

	.top-view {
		padding: 20rpx 24rpx;
		/* margin-bottom: 10rpx;
  margin-top: 20rpx; */
		background: white;
	}

	.kaquan {
		background: #007830;
		color: white;
		padding: 8rpx 14rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.addr {
		font-size: 32rpx;
		color: #007830;
		font-weight: bold;
	}

	.addr image {
		width: 28rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}


	.search {
		width: 80%;
	}

	.search-con image {
		width: 18rpx;
		height: 18rpx;
		margin-right: 5rpx;
	}

	.search-btn {
		margin-left: 15rpx;
		background-image: -webkit-linear-gradient(bottom, #02CCA1, #007830);
		font-weight: bold;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.main {}

	.main-sel {
		/* padding:24rpx 0rpx 10rpx; */
		background: white;
		position: relative;
	}

	.sel-tan {
		position: absolute;
		width: 100%;
		top: 80rpx;
		background: rgba(0, 0, 0, 0.459);
		height: 100vh;
		left: 0;
		z-index: 2;
	}

	.txjl {
		background: white;
		font-size: 28rpx;
	}

	.txjl_l {
		width: 20%;
		text-align: center;
		background: #F8F8F8;
	}

	.txjl_l view {
		padding: 15rpx 30rpx;
		background: white;
		color: #007830;
	}

	.txjl_r {
		width: 80%;
	}

	.txjl_r view {
		padding: 14rpx 25rpx;
	}

	.jtsc {
		background: white;
		padding: 16rpx 24rpx;
		font-size: 24rpx;
	}

	.jtsc-tit {
		margin-bottom: 20rpx;
	}

	.time {
		margin-bottom: 30rpx;
	}

	.time view {
		background: #E2E2E2;
		border-radius: 4rpx;
		width: 188rpx;
		/* 
  height: 66rpx; */
		text-align: center;
		padding: 18rpx 0rpx;
		font-size: 20rpx;
		margin-bottom: 20rpx;
	}

	.time .time-act {
		background: #D5F1E0;
		border: solid 1rpx #007830;
		color: #007830;
		border-radius: 4rpx;
	}

	.paixu {
		background: white;
		font-size: 24rpx;
	}

	.paixu view {
		padding: 16rpx 24rpx;
	}

	.sel-item-a {
		color: #007830;
	}

	.sel-item-a .sel-icon {
		transform: rotate(270deg);
	}

	.main-date {
		font-size: 24rpx;
	}

	.main-date text {
		color: #007830;
	}

	.sel-item {
		font-size: 24rpx;
	}

	.sel-icon {
		transform: rotate(90deg);
		color: #828282;
	}

	.list {
		border-radius: 8rpx;
		box-shadow: 1rpx 1rpx 2rpx 1rpx gainsboro;
		width: 342rpx;
		margin-bottom: 12rpx;
	}

	.list .img {
		width: 100%;
		height: 336rpx;
		display: block;
	}

	.list-info {
		padding: 12rpx 16rpx;

	}

	.name {
		margin-bottom: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

	}

	.tags {
		margin-bottom: 25rpx;
	}

	.tags view {
		background: #E0F2E7;
		border-radius: 4rpx;
		color: #007830;
		font-size: 24rpx;
		padding: 2rpx 12rpx;
		margin-right: 10rpx;
		width: fit-content;
	}

	.juli {
		color: #B9B9B9;
		font-size: 16rpx;
	}

	.list-bto {}

	.star {
		font-size: 18rpx;
		color: #C12F2F;
	}

	.bto-right {
		font-size: 28rpx;
		color: white;
		background: #007830;
		border-radius: 8rpx;
		padding: 6rpx 17rpx;
	}

	.bto-right2 {
		color: #C12F2F;
		font-size: 28rpx;
	}

	.list2 {
		padding: 20rpx 24rpx;
		background: white;
		margin: 20rpx;
		border-radius: 8rpx;
	}

	.list2 .head {
		width: 120rpx;
		height: 120rpx;
	}

	.list2-info {
		width: 55%;
	}

	.list2-info .name {
		font-size: 30rpx;
		margin: 0;
	}

	.list2-info .list2-info-flex {
		margin-top: 15rpx;
	}

	.list2-info .list2-info-flex image {
		width: 28rpx;
		height: 28rpx;
	}

	.list2-info .list2-info-flex view {
		color: #7E8391;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.toOrder {
		background: #007830;
		border-radius: 8rpx;
		color: white;
		width: 131rpx;
		line-height: 58rpx;
		text-align: center;
	}

	.zhiling {
		background: white;
		width: 70%;
		margin: 100rpx auto;
		background: white;
		text-align: center;
		padding: 40rpx 0;
	}

	.zhiTit {
		font-size: 32rpx;
		color: #007830;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.zhiBtn {
		background: #007830;
		color: white;
		margin: 40rpx 40rpx 20rpx;
		border-radius: 20rpx;
		padding: 10rpx 0;
		font-size: 30rpx;
	}
</style>